import React from 'react';
import { Row, Col, Card, Input, Button, Space } from 'antd';

const NetworkConfig: React.FC = () => {
  return (
    <div className="p-6">
      <Row gutter={[16, 16]} className="mb-6">
        <Col span={24}>
          <Card title="网络参数配置" className="mb-6">
            <Row gutter={[16, 16]}>
              <Col span={6}>
                <div className="space-y-4">
                  <div>
                    <div className="mb-2 font-medium">节点数量</div>
                    <Input prefix={<i className="fas fa-network-wired mr-2"/>} defaultValue="10" className="w-full"/>
                  </div>
                  <div>
                    <div className="mb-2 font-medium">路由协议</div>
                    <Button className="w-full text-left !rounded-button whitespace-nowrap" icon={<i className="fas fa-route mr-2"/>}>
                      AODV <i className="fas fa-chevron-down float-right mt-1"/>
                    </Button>
                  </div>
                </div>
              </Col>
              <Col span={6}>
                <div className="space-y-4">
                  <div>
                    <div className="mb-2 font-medium">传输协议</div>
                    <Button className="w-full text-left !rounded-button whitespace-nowrap" icon={<i className="fas fa-exchange-alt mr-2"/>}>
                      TCP <i className="fas fa-chevron-down float-right mt-1"/>
                    </Button>
                  </div>
                  <div>
                    <div className="mb-2 font-medium">MAC协议</div>
                    <Button className="w-full text-left !rounded-button whitespace-nowrap" icon={<i className="fas fa-wifi mr-2"/>}>
                      802.11ax <i className="fas fa-chevron-down float-right mt-1"/>
                    </Button>
                  </div>
                </div>
              </Col>
              <Col span={6}>
                <div className="space-y-4">
                  <div>
                    <div className="mb-2 font-medium">信道带宽</div>
                    <Input prefix={<i className="fas fa-tachometer-alt mr-2"/>} defaultValue="20" suffix="MHz" className="w-full"/>
                  </div>
                  <div>
                    <div className="mb-2 font-medium">工作频率</div>
                    <Input prefix={<i className="fas fa-wave-square mr-2"/>} defaultValue="2.4" suffix="GHz" className="w-full"/>
                  </div>
                </div>
              </Col>
              <Col span={6}>
                <div className="space-y-4">
                  <div>
                    <div className="mb-2 font-medium">传输功率</div>
                    <Input prefix={<i className="fas fa-bolt mr-2"/>} defaultValue="20" suffix="dBm" className="w-full"/>
                  </div>
                  <div>
                    <div className="mb-2 font-medium">天线增益</div>
                    <Input prefix={<i className="fas fa-broadcast-tower mr-2"/>} defaultValue="2" suffix="dBi" className="w-full"/>
                  </div>
                </div>
              </Col>
            </Row>
            <Row className="mt-6">
              <Col span={24}>
                <Space className="w-full justify-end">
                  <Button icon={<i className="fas fa-undo"/>} className="!rounded-button whitespace-nowrap">恢复默认</Button>
                  <Button type="primary" icon={<i className="fas fa-save"/>} className="!rounded-button whitespace-nowrap">保存配置</Button>
                </Space>
              </Col>
            </Row>
          </Card>
        </Col>
        <Col span={12}>
          <Card title="网络拓扑设置" className="h-[500px]">
            <div className="mb-4">
              <div className="font-medium mb-2">拓扑类型</div>
              <div className="grid grid-cols-3 gap-4">
                <Card className="cursor-pointer border-blue-500" hoverable>
                  <div className="text-center">
                    <i className="fas fa-project-diagram text-2xl mb-2 text-blue-500"/>
                    <div>网格拓扑</div>
                  </div>
                </Card>
                <Card className="cursor-pointer" hoverable>
                  <div className="text-center">
                    <i className="fas fa-circle-notch text-2xl mb-2"/>
                    <div>环形拓扑</div>
                  </div>
                </Card>
                <Card className="cursor-pointer" hoverable>
                  <div className="text-center">
                    <i className="fas fa-star text-2xl mb-2"/>
                    <div>星型拓扑</div>
                  </div>
                </Card>
              </div>
              <div className="mt-4">
                <div className="font-medium mb-2">拓扑参数</div>
                <Row gutter={[16, 16]}>
                  <Col span={12}>
                    <div className="mb-2">节点间距 (m)</div>
                    <Input prefix={<i className="fas fa-arrows-alt-h mr-2"/>} defaultValue="100" className="w-full"/>
                  </Col>
                  <Col span={12}>
                    <div className="mb-2">覆盖范围 (m²)</div>
                    <Input prefix={<i className="fas fa-vector-square mr-2"/>} defaultValue="1000" className="w-full"/>
                  </Col>
                </Row>
              </div>
            </div>
          </Card>
        </Col>
        <Col span={12}>
          <Card title="高级设置" className="h-[500px]">
            <div className="space-y-4">
              <div>
                <div className="font-medium mb-2">QoS 设置</div>
                <Row gutter={[16, 16]}>
                  <Col span={12}>
                    <div className="mb-2">最大延迟 (ms)</div>
                    <Input prefix={<i className="fas fa-clock mr-2"/>} defaultValue="200" className="w-full"/>
                  </Col>
                  <Col span={12}>
                    <div className="mb-2">丢包率阈值 (%)</div>
                    <Input prefix={<i className="fas fa-exclamation-triangle mr-2"/>} defaultValue="1" className="w-full"/>
                  </Col>
                </Row>
              </div>
              <div>
                <div className="font-medium mb-2">移动性模型</div>
                <Button className="w-full text-left !rounded-button whitespace-nowrap" icon={<i className="fas fa-running mr-2"/>}>
                  随机路点模型 <i className="fas fa-chevron-down float-right mt-1"/>
                </Button>
              </div>
              <div>
                <div className="font-medium mb-2">传播模型</div>
                <Button className="w-full text-left !rounded-button whitespace-nowrap" icon={<i className="fas fa-broadcast-tower mr-2"/>}>
                  自由空间传播模型 <i className="fas fa-chevron-down float-right mt-1"/>
                </Button>
              </div>
              <div>
                <div className="font-medium mb-2">干扰模型</div>
                <Button className="w-full text-left !rounded-button whitespace-nowrap" icon={<i className="fas fa-random mr-2"/>}>
                  加性高斯白噪声 <i className="fas fa-chevron-down float-right mt-1"/>
                </Button>
              </div>
            </div>
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default NetworkConfig; 